<template>
  <div class="main">
    <mine-title>用户详情</mine-title>
    <div class="content" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="12">
          <div>
            <el-form
              ref="form"
              :model="form"
              label-width="110px"
              :rules="rules"
            >
              <el-form-item label="用户名：" prop="username">
                <el-input
                  v-model="form.username"
                  size="small"
                  clearable
                  disabled
                ></el-input>
                <el-alert
                  title="默认初始密码：123456"
                  :closable="false"
                  style="line-height: 10px"
                  type="success"
                >
                </el-alert>
              </el-form-item>
              <el-form-item label="手机号：" prop="phonenumber">
                <el-input
                  v-model="form.phonenumber"
                  size="small"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱：" prop="email">
                <el-input
                  v-model="form.email"
                  size="small"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="状态：" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio :label="'0'">正常</el-radio>
                  <el-radio :label="'1'">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" :rows="4" />
              </el-form-item>
              <el-form-item class="form-btn-row">
                <mine-button type="primary" @click="onCancel" secondary
                  >取 消</mine-button
                >
                <mine-button type="primary" @click="onSubmit"
                  >保 存</mine-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import authUtil from "../../../utils/authUtil.js";

export default {
  name: "itemDetail",
  data() {
    return {
      form: {
        id: -1,
        username: "",
        password: "123456",
        phonenumber: "",
        email: "",
        status: "0",
        remark: "",
      },
      rules: {
        username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      loading: false,
    };
  },
  computed: {},
  methods: {
    async init() {
      await this.getUser();
    },
    getUser: async function () {
      let id = this.$route.query.id;
      try {
        this.loading = true;
        const res = await this.$store.dispatch("userAdmin/getUserDataById", id);
        const result = res.data || {};
        // console.log(result)
        if (result.code == 200) {
          const data = result.sysUser || {};
          this.form = data;
          this.loading = false;
        }
      } catch (e) {
        console.error(e);
        this.loading = false;
      }
    },
    onSubmit() {
      let _this = this;
      this.$refs.form.validate(async (valid, object) => {
        let { form } = _this;
        if (valid) {
          this.loading = true;
          let result = await this.$store.dispatch("userAdmin/addUser", form);
          let data = result.data;
          // console.log(data)
          if (data.code == 200) {
            this.$confirm("保存成功，是否需要返回列表？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.$router.push("/userAdmin");
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            this.loading = false;
            this.$message.error(data.msg || "新建失败");
          }
        } else {
          return false;
        }
      });
    },
    onCancel() {
      this.$router.push("/userAdmin");
      this.form = {
        id: -1,
        username: "",
        password: "123456",
        phonenumber: "",
        email: "",
        status: "0",
        remark: "",
      };
    },
  },
  created() {
    this.init();
    this.$store.commit("SET_BREADCRUMB", [
      { title: "用户管理", path: "/userAdmin" },
      { title: "用户详情", path: "" },
    ]);
  },
  mounted() {},
};
</script>

<style scoped>
</style>
